<template>
  <BasicModal v-bind="$attrs" @register="registerModal" destroyOnClose :title="getTitle" :width="700"
    @ok="handleSubmit">
    <a-form ref="formRef" :model="formData" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-row>
        <a-col :span="24">
          <a-form-item label="样品类型" name="midTypeName">
            <a-input v-model:value="formData.midTypeName" :disabled="true"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="检测项目" name="itemName">
            <a-input v-model:value="formData.itemName" :disabled="true"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="项目状态" name="itemStatus">
            <a-input v-model:value="formData.itemStatus" :disabled="true"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="班组" name="team">
            <a-input v-model:value="formData.team" :disabled="true"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="实验人员" name="userName">
            <a-input v-model:value="formData.userName" :disabled="true" style="width: 370px;"></a-input>
            <a-button style="color:rgb(80, 173, 255);left: 10px;" size="middle" class="input"
              @click="handleUserModal()">选择</a-button>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="复核人员" name="auditName">
            <a-input v-model:value="formData.auditName" :disabled="true" style="width: 370px;"></a-input>
            <a-button style="color:rgb(80, 173, 255);left: 10px;" size="middle" class="input"
              @click="handleAuditModal()">选择</a-button>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="发布时间" name="pubDate">
            <a-date-picker valueFormat="YYYY-MM-DD" v-model:value="formData.pubDate" :disabled="false"
              style="width: 100%;" />
          </a-form-item>
          <a-form-item label="截至时间" name="finDate">
            <a-date-picker valueFormat="YYYY-MM-DD" v-model:value="formData.finDate" :disabled="false"
              style="width: 100%;" />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="备注" name="remark">
            <a-textarea v-model:value="formData.remark" />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <TableUserSkillModal @register="registerUserSkillModal" @getSelectUserSkill="onSelectOkTwo"></TableUserSkillModal>
    <TableUserAuditModal @register="registerUserAuditModal" @getSelectUserSkillB="onSelectOkThree"></TableUserAuditModal>
  </BasicModal>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue';
import { BasicModal, useModalInner } from '/@/components/Modal';
import { updateTaskItems } from './LabEntrustAllotList.api';
import TableUserSkillModal from './LabItemUserSkillTableA.vue';
import TableUserAuditModal from './LabItemUserSkillTableB.vue';
import { useModal } from '/@/components/Modal';
// import dayjs from 'dayjs';

const emit = defineEmits(['register', 'success']);
const labelCol = reactive({
  xs: { span: 24 },
  sm: { span: 5 },
});
const wrapperCol = reactive({
  xs: { span: 24 },
  sm: { span: 16 },
});
const getTitle = ref('任务分配调整');
const [registerUserSkillModal, { openModal}] = useModal();
const [registerUserAuditModal, { openModal:openAuditModal}] = useModal();
const formData = reactive({
  id: "",
  itemId: "",
  itemName: "",
  basisId: "",
  basisName: "",
  basisNum: "",
  bigTypeId: "",
  bigTypeName: "",
  midTypeId: "",
  midTypeName: "",
  samId: "",
  samName: "",
  samNum: "",
  team: "",
  entrustId: "",
  userName: "",
  userId: "",
  itemStatus: "",
  auditId: "",
  auditName: "",
  remark: "",
  pubDate: "",
  finDate: "",
});

function reset() {
  formData.id = '';
  formData.itemId = '';
  formData.itemName = '';
  formData.basisId = '';
  formData.basisName = '';
  formData.basisNum = '';
  formData.bigTypeId = "";
  formData.bigTypeName = '';
  formData.midTypeId = "";
  formData.midTypeName = '';
  formData.samId = '';
  formData.samNum = '';
  formData.samName = '';
  formData.team = '';
  formData.entrustId = '';
  formData.userName = '';
  formData.userId = "";
  formData.itemStatus = '';
  formData.auditId = '';
  formData.auditName = '';
  formData.remark = '';
  formData.pubDate = '';
  formData.finDate = '';
}

const [registerModal, { closeModal, setModalProps }] = useModalInner((data) => {
  setModalProps({
    minHeight: 150
  });
  reset();
  Object.assign(formData, data.record);
  // const currentDate = dayjs().format('YYYY-MM-DD');
});

function handleUserModal() {
  openModal(true, {
    itemId:formData.itemId,
    basisId:formData.basisId
  });
}
function handleAuditModal() {
  openAuditModal(true, {
    itemId:formData.itemId,
    basisId:formData.basisId
  });
}

function onSelectOkTwo(uId, uName) {
  formData.userName = uName;
  formData.userId = uId;
}

function onSelectOkThree(uId, uName) {
  formData.auditName = uName;
  formData.auditId = uId;
}

//表单提交事件
async function handleSubmit() {
  try {
    //提交表单
    await updateTaskItems(formData);
    //关闭弹窗
    closeModal();
    //刷新列表
    emit('success');
  } finally {
    setModalProps({ confirmLoading: false });
  }
}
</script>

<style lang="less" scoped>
/** 时间和数字输入框样式 */
:deep(.ant-input-number) {
  width: 100%
}

:deep(.ant-calendar-picker) {
  width: 100%
}
</style>